import React from 'react';

import '@/assets/css/order.css'

const Component = () =>
{
    let [status, SetStatus] = React.useState('')
    let [list, SetList] = React.useState([])
    let [page, SetPage] = React.useState(1)
    let [hasMore, SethasMore] = React.useState(true)

    let statuslist = [
        {name:'全部', value: ''},
        {name:'已支付', value: '1'},
        {name:'已入住', value: '2'},
        {name:'已退房', value: '3'},
        {name:'已评价', value: '4'},
        {name:'申请退款', value: '-1'},
    ];



    //上拉加载
    const loadMore = async () =>
    {
        ListData()
    }

    // 下拉刷新的方法
    const onRefresh = async () =>
    {
        SetPage(1)
        SethasMore(true)
        SetList([])
        ListData()
    }


    //请求列表数据
    const ListData = async () =>
    {
        //封装数据
        var data = {
            busid: React.Business.id,
            status: status,
            page: page
        }

        var result = await React.HTTP.post('/order/index', data)

        if(result.code == 1)
        {
            SethasMore(true)
            SetPage(page + 1)
            SetList(list.concat(result.data))
        }else
        {
            SethasMore(false)
            return false
        }
    }

    let TabChange = (status:any) =>
    {
        SetStatus(status)
        onRefresh()
    }

    // 删除订单
    const del = async (id:any) =>
    {
        var result = await React.UI.Dialog.confirm({
            content: '是否确认删除'
        })

        //封装数据
        var data = {
            busid: React.Business.id,
            id: id
        }

        if(result)
        {
            var result = await React.HTTP.post('/order/del', data)

            if(result.code == 1)
            {
                React.UI.Toast.show({
                    icon: 'success',
                    content: result.msg
                })

                onRefresh()
            }else
            {
                React.error(result.msg, () => {})
            }
        }
    }

    // 取消订单
    const cancellation = async (id:any) =>
    {
        var result = await React.UI.Dialog.confirm({
            content: '是否确认取消'
        })

        //封装数据
        var data = {
            busid: React.Business.id,
            id: id
        }

        if(result)
        {
            var result = await React.HTTP.post('/order/cancellation', data)

            if(result.code == 1)
            {
                React.UI.Toast.show({
                    icon: 'success',
                    content: result.msg
                })

                onRefresh()
            }else
            {
                React.error(result.msg, () => {})
            }
        }
    }
    // console.log(list)

    return (
        <>
            <React.UI.NavBar 
                style={{background: `rgb(55, 68, 134)`, color:'#fff'}}
                back='返回' 
                onBack={React.back}
            >订单列表</React.UI.NavBar>

            <React.UI.Tabs defaultActiveKey={status} onChange={TabChange}>
                {statuslist.map((item) => 
                    <React.UI.Tabs.Tab title={item.name} key={item.value} />)}
            </React.UI.Tabs>

            <React.UI.PullToRefresh onRefresh={onRefresh}>
                <div className="order_list">
                    {list.map((item:any, key) => 
                        <div className="item" key={key}>
                            <div className="item_top">
                                <p>{item.room ? item.room.name : ''}</p>
                                <div className="top_tag">{item.status_text}</div>
                            </div>
                            <div className="house">
                                <div className="item_swipers">
                                    <img src={item.room.thumb_text} alt="" />
                                </div>
                                <div className="item_times">
                                    <div>
                                        <div>{item.starttime_text}</div>
                                        <div>{item.startdata_text} 24:00</div>
                                    </div>
                                    <div>
                                        <div>共{item.day_text}晚</div>
                                        <div className="item_right">
                                            <img src="./assets/images/right1.png" alt="" />
                                        </div>
                                    </div>
                                    <div>
                                        <div>{item.endtime_text}</div>
                                        <div>{item.enddata_text} 14:00</div>
                                    </div>
                                    <div>
                                        <div className="item_pay">订单总价</div>
                                        <div className="item_price">￥{item.price}</div>
                                    </div>
                                </div>
                            </div>
                            <div className="item_bar">
                                {item.status == '1' && <React.UI.Button size="small" color="warning" onClick={() => cancellation(item.id)}>取消订单</React.UI.Button>}

                                {item.status == '3' && <React.UI.Button size="small" color="success" onClick={() => React.navigate(`order/comment?orderid=${item.id}`)}>评价</React.UI.Button>}

                                <React.UI.Button size="small" color="primary" onClick={() => React.navigate(`/order/info?orderid=${item.id}`)}>订单详情</React.UI.Button>

                                {['3','4','-2','-3'].includes(item.status) && <React.UI.Button size="small" color="danger" onClick={() => del(item.id)}>删除订单</React.UI.Button>}
                            </div>
                        </div>
                    )}
                    
                </div>
            </React.UI.PullToRefresh>

            <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />


        </>
    )
}

export default Component